<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%   String path = request.getContextPath();   
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
	String bpath = request.getScheme()+"://"+request.getServerName();
	String openId = (String)request.getSession().getAttribute("openId");
	if(openId==null || openId.equals("")){
	 	openId = (String)request.getParameter("openId");
	 	request.getSession().setAttribute("openId", request.getParameter("openId"));	
	}
	 
%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,,user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">
    <title>在线预约</title>
    <link href="/bootstrapDemo/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/bootstrapDemo/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="/bootstrapDemo/js/jquery.js"></script>
	<script src="/bootstrapDemo/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
    function   IsDate(sm,mystring)   { 
        var   reg   =   /^(\d{4})-(\d{2})-(\d{2})$/;  
        var   str   =   mystring;  
	       if(!reg.test(str)){
	    	   alert("请保证"+sm+"中输入的日期格式为yyyy-mm-dd或正确的日期!");
	    	   return   false; 
	       }else{
	    	   return   true;  
	       }
      }   
    
  	//ajax保存
	function tosubmitAjax(frmid){
  		var OUsername = $("#OUsername").val();
  		var OPhone = $("#OPhone").val();
  		var OArriveDate = $("#OArriveDate").val();
  		var OLeaveDate = $("#OLeaveDate").val();
  		var OUserno = $("#OUserno").val();
  		var OHorseType = $("#OHorseType").val();
  		if(OUsername==null || OUsername=="" || OUsername=="undefined"){
  			alert("请填写联系人");
  		}else if(OPhone==null || OPhone=="" || OPhone=="undefined"){
  			alert("请填写联系电话");
  		}else if(OArriveDate==null || OArriveDate=="" || OArriveDate=="undefined"){
  			alert("请填写到达时间");
  		}else if(OLeaveDate==null || OLeaveDate=="" || OLeaveDate=="undefined"){
  			alert("请填写离开时间");
  		}else if(OUserno==null || OUserno=="" || OUserno=="undefined"){
  			alert("请填写预约人数");
  		}else if(OHorseType==null || OHorseType=="" || OHorseType=="undefined"){
  			alert("请填写预约项目");
  		}else if(!IsDate("到达时间",OArriveDate)){
  			return;
  		}else if(!IsDate("离开时间",OLeaveDate)){
  			return;
  		}else{
  			var murl = "<%=basePath%>/online/saveOnline.action";
  			var parmers = $("#"+frmid).serialize();
  			$.post(murl,parmers,function(boo){
  				if(boo){
  					 document.getElementById("successDiv").style.display="";
  					 location.href = "<%=basePath%>/online/getWorderPage.action";
  				}else{
  					document.getElementById("failureDiv").style.display="";
  				}
  			}); 
  		}
	
	}
    </script>
  </head>
<body>
	<!-- 这里是头部的轮播插件 start-->
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="padding-bottom: 0px;">
        <ol class="carousel-indicators" >
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
          <li data-target="#carousel-example-generic" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" style="height: 130px;">
          <div class="carousel-inner">
                  <div class="item active">
                      <img src="/wpages/images/lunbo/03.gif" alt="" style="width: 100%"/>
                  </div>
                  <div class="item">
                      <img src="/wpages/images/lunbo/02.gif" alt="" style="width: 100%"/>
                  </div>
                  <div class="item">
                      <img src="/wpages/images/lunbo/01.gif" alt="" style="width: 100%"/>
                  </div>
                   <div class="item">
                      <img src="/wpages/images/lunbo/04.gif" alt="" style="width: 100%"/>
                  </div>
                   <div class="item">
                      <img src="/wpages/images/lunbo/05.gif" alt="" style="width: 100%"/>
                  </div>
              </div>
        </div>
      </div>
      
	<!-- 这里是头部的轮播插件 end-->
<div class="jumbotron" style="padding: 10px;font-size: 14px;"> 
      <div class="panel panel-primary" style="margin-bottom: 10px;" >
        <div class="panel-heading">
          <h3 class="panel-title">订单说明</h3>
        </div>
        <div class="panel-body" style="line-height: 18px;padding: 5px;">
         	通过填写下面的在线预约订单，然后就可以完成预约服务，并在我的在线预约中看到您预约的订单。
        </div>
      </div>
      
     <div class="row" style="margin: 0px;">
        <div class="col-sm-4" style="width: 100%;padding: 0px;">
          <div class="list-group" >
            <li  class="list-group-item"> <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;&nbsp;<a>${company.CFax}</a>
			</li>
            <li  class="list-group-item"> <span class="glyphicon glyphicon-phone"></span>&nbsp;&nbsp;<a>15127671207</a>
			</li>
            <a  href="http://api.map.baidu.com/marker?location=39.959302,116.832617&title=功夫梦·中国&content=功夫梦·中国&output=html" class="list-group-item"><span class="glyphicon glyphicon-map-marker"></span>${company.CLocation}
            	<dl class="pull-right">
				  <dt ><img alt="" src="/images/png/993.png"></dt>
				</dl> 
            </a>
          </div>
        </div>
        <div class="col-sm-4" style="width: 100%;padding: 0px;">
          <div class="list-group">
            <a href="/online/getMyOnlineList.action"  class="list-group-item"><img alt="" src="/images/png/867.png">&nbsp; 我的在线预约  
            	<dl class="pull-right">
				  <dt ><span class="badge" style="background-color: red;">${orderNum}</span><img alt="" src="/images/png/993.png"></dt>
				</dl>
             </a>
          </div>
        </div>
      </div>
      <div class="alert alert-success alert-dismissable" id="successDiv" style="margin: 0px;display: none">
		   <button type="button" class="close" data-dismiss="alert" 
		      aria-hidden="true">
		      &times;
		   </button>
		  操作成功！您已经很好的完成了提交。
		</div>
		<div class="alert alert-warning alert-dismissable" id="failureDiv" style="margin: 0px;display: none">
		   <button type="button" class="close" data-dismiss="alert" 
		      aria-hidden="true">
		      &times;
		   </button>
		   操作失败！请重新尝试。
		</div>
      <form method="post" name="onlineOrderAddFrm" id="onlineOrderAddFrm" action="/online/saveOnline.action">
      <div class="panel panel-primary">
	   <div class="panel-heading">
          <h3 class="panel-title">请认真填写在线预约订单</h3>
        </div>
	  <table class="table">
	 	 <tr style="background-color: white;border: 0">
				<td >联系人</td>		
				<td >
				<input type="text" name="online.OUsername"  class="form-control" id="OUsername" placeholder="请填写联系人">
				</td>		
			</tr>
			<tr style="background-color: white;border: 0">
				<td >联系电话</td>		
				<td ><input type="number" name="online.OPhone" class="form-control" id="OPhone" placeholder="请填写电话"></td>		
			</tr>
			<tr style="background-color: white;border: 0">
				<td >预达日期</td>		
				<td ><input type="date" class="form-control" name="online.OArriveDate"  id="OArriveDate" placeholder="请选择日期"></td>		
			</tr>
			<tr style="background-color: white;border: 0">
				<td >预离日期</td>		
				<td ><input type="date" class="form-control" name="online.OLeaveDate"  id="OLeaveDate" placeholder="请选择日期"></td>		
			</tr>
			<tr style="background-color: white;border: 0">
				<td >预约人数</td>		
				<td ><input type="number" class="form-control" name="online.OUserno" id="OUserno" placeholder="请填写预约人数"> </td>		
			</tr>
			<tr style="background-color: white;border: 0">
				<td >预约项目</td>		
				<td >
				<select class="form-control" name="online.OHorseType" id="OHorseType" >
					<option value="少儿武术">少儿武术</option>
					<option value="成人散打">成人散打</option>
					<option value="太极拳">太极拳</option>
				</select>
			</tr>
			<tr style="background-color: white;border: 0">
				<td >备注</td>		
				<td >
				<textarea rows="2" cols="2" class="form-control"  name="online.ODesc" id="ODesc" placeholder="备注信息"></textarea>  </td>		
			</tr>
	  </table>
	</div>
		<button type="button" class="btn btn-primary" style="width: 100%" onclick="tosubmitAjax('onlineOrderAddFrm');">提交</button>
	   </form>
	<div id="footer" style="height: 40px; text-align: center;margin-top: 10px;">
	 	<p>版权所有@功夫梦·中国 2014-2016</p>
	 </div>
		 
   <jsp:include page="/wpages/bottom.jsp"></jsp:include>
</div>
</body>
a,a:hover{ text-decoration:none; color:#fff;}
</html>